<template>
	<view>
		<view class="bg padding margin-top-xs">
			<view class="flex justify-between align-center">
				<view class="text-lg text-bold">当前位置</view>
				<view style="color: #3FCB46;" @click="gxAddress">更新位置</view>
			</view>
			<view style="color: #999999;margin-top: 8rpx;">{{address}}</view>
			<view style="width: 100%;height: 1rpx;background: #E6E6E6;margin-top: 30rpx;"></view>
			<view class="flex align-center justify-between margin-top">
				<view style="color: #3FCB46;" @click="openMap">手动设置</view>
				<view class="btn" @tap="openSave" v-if="address">签到</view>
				<view class="btn" @tap="openMap" v-if="!address">选择地址</view>
			</view>
		</view>

		<view class="bg padding margin-top">
			<view class="text-lg text-bold">服务区域(半径1km)</view>

			<view class="margin-top">
				<map style="width: 100%; height: 571rpx;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				address: '',
				covers: [{
					latitude: '',
					longitude: '',
					iconPath: '../../static/images/address.png'
				}]
			}
		},
		onLoad() {
			let that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					console.log('当前位置的位置：' + JSON.stringify(res));
					uni.setStorageSync('longitude', res.longitude);
					uni.setStorageSync('latitude', res.latitude);
					that.latitude = res.latitude
					that.longitude = res.longitude
				}
			});
		},
		onShow() {

		},
		methods: {
			gxAddress() {
				let that = this;
				let longitude = uni.getStorageSync('longitude');
				let latitude = uni.getStorageSync('latitude');
				let userId = uni.getStorageSync('userId')
				this.$queue.showLoading('更新中...')
				let data = {
					typeId: longitude,
					typeName: latitude,
					userId: userId
				}
				that.$Request.postJson('/app/message/insertArtificerLocation', data).then(
					res => {
						uni.hideLoading();
						if (res.code === 0) {
							that.$queue.showToast('更新成功！');
						}
					});
			},
			openSave() {
				this.$queue.showLoading('签到中...')
				if (!this.address) {
					uni.hideLoading();
					this.openMap();
					// this.$queue.showToast('请选择地址信息后进行签到！')
					return;
				}
				let data = {
					longitude: this.longitude,
					latitude: this.latitude,
					address: this.address,
					city: '西安市'
				}
				this.$Request.postT('/app/artificer/signIn', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.$queue.showToast('签到成功！')
						setTimeout(d => {
							uni.navigateBack();
						}, 1000)
					} else {
						this.$queue.showToast(res.msg)
					}
				});
			},
			openMap() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.address = res.address
					}
				});
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
	}

	.bg {
		background: #FFFFFF;

	}

	.btn {
		width: 120rpx;
		height: 50rpx;
		background: #3FCB46;
		border-radius: 8rpx;
		text-align: center;
		line-height: 50rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 500;
	}
</style>
